<template>
  <div class="homemiddlebox">
    <div class="gaodemap">
      <Gaodemap :mapmarkerlist="mapmarkerlist"></Gaodemap>
    </div>
    <div class="rightbox">
      <div class="topbox rightlitt">
        <div class="fuhequshi">
          <div class="title">发电量分析</div>
          <div>
            <el-radio-group v-model="radio3" size="mini" @change="getfenxi">
              <el-radio-button label="日"></el-radio-button>
              <el-radio-button label="月"></el-radio-button>
              <el-radio-button label="年"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="huanbi" ref="huanbi"></div>
      </div>
      <div class="rightlitt">
        <div class="fuhequshi">
          <div class="title">发电功率</div>
          <div>
            <el-radio-group v-model="radio4" size="mini" @change="getgonglv">
              <el-radio-button label="日"></el-radio-button>
              <el-radio-button label="月"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="huanbi" ref="fuhequshi"></div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getuseraddressapi, gettonghuanbiapi, getyongdianqushiapi } from '@/api/energy-consumption/GeneralSituation/HomePage'
import {getguangfuzuobiaoapi,getfadiangonglvapi,getfadianliangapi} from '@/api/Photovoltaic/SystemHeught/PhotovoSurvey'
import * as echarts from 'echarts';
import Gaodemap from './components/GaodeMap'
export default {
  name: 'CallPoliceMiddle',
  components:{Gaodemap},
  data() {
    return {
      radio3:'日',
      radio4:'日',
      mapmarkerlist:[]
    };
  },

  async mounted() {
    const { data: { list } } = await getguangfuzuobiaoapi()
    this.mapmarkerlist = list.map(ele => {
      return {
        companyName: ele.name,
        lon: ele.longitude,
        lat: ele.latitude,
        id:ele.id
      }
    })
    this.getfenxi()
    this.getgonglv()
  },

  methods: {
    async getfenxi() {
      var chartDom = this.$refs.huanbi
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      const { data: { entity } } = await getfadianliangapi({ dateType: this.radio3 == '日' ? '1' : this.radio4 == '月' ? '2' : '3' })
      var timePoints =entity.datalist.map(ele=>ele.timeReading)
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        color:['#5087ec'],
        legend: { },
        grid: {
          left: '3%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data:timePoints,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name:'发电量(kWh)'
          }
        ],
        series: [
           {
            name:entity.name,
            data: entity.datalist.map(ele=>ele.valueReading),
            type: 'bar',
            label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                      color: '#5087ec' // 设置数值的颜色为红色
                  }
              }
          }
        ]
      };
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      loading.close()
    },
    async getgonglv() {
      var chartDom = this.$refs.fuhequshi
      var myChart = echarts.init(chartDom);
      var option;
      const colorlist=['#2796fe','#f3da59']
      const { data: { list } } = await getfadiangonglvapi({ dateType: this.radio4 == '日' ? '1' :this.radio4 == '月' ? '2':'3' })
      const timePoints=list[0]?.datalist.map(ele=>ele.timeReading)
      const series= list.map((ele,index) => {
        return {
            name:ele.name,
            type: 'line',
            smooth: true,
              showSymbol: false,
              symbol: 'none',
              symbolSize: 6,
              lineStyle: {
                  color: colorlist[index] // 设置线条颜色为红色
              },
              itemStyle: {
                  color: colorlist[index] // 设置图例颜色为红色
              },
              data: ele.datalist.map(ele=>ele.valueReading),
          }

      })
      option = {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '3%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        legend: {
      right:'0',
      itemStyle:{
        color:'inherit'
      }
        },
        xAxis: [
          {
            type: 'category',
            data: timePoints,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '功率(kW)',
            axisLine: {
              show: true,
            },
          }
        ],
        series: series
      };
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  },
};
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.homemiddlebox{
  height: 100%;
  display: flex;
  .gaodemap{
    width: 66.45%;
    background-color: #fff;
    margin-right: 10px;
  }
  .rightbox{
     flex:1;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between; 
    .rightlitt{
      flex: 1;
      background-color: #fff;
      padding: 15px;
      .fuhequshi{
        display: flex;
        justify-content: space-between;
      }
      .huanbi{
        height: 88%;
      }
      .title{
        font-weight: bold;
        font-size: 16px;
        color: #323232;
      }
    }
    .topbox{
      margin-bottom: 10px;
    }
  }
}
</style>